<template>
  <div style="padding: 12px;">
    <a-row :gutter="[16,16]">
      <a-col
        v-for="(d, index) in gDataSource"
        :key="index"
        :span="8"
      >
        <a-card :title="d.name">
          <p>
            <b>动环能耗：</b>
            <span>{{ (d.power ? parseFloat(d.power).toFixed(2) : 0) + " kWH" }}</span>
          </p>
          <p>
            <b>数据中心能耗：</b>
            <span>{{ (d.dpower ? parseFloat(d.dpower).toFixed(2) : 0)  + " kWH"}}</span>
          </p>
          <p>
            <b>数据中心温度：</b>
            <span>{{ (d.temperature ? parseFloat(d.temperature).toFixed(2) : 0) + " °C"}}</span>
          </p>
          <p>
            <b>数据中心配电子网负荷：</b>
            <span>{{ (d.load ? parseFloat(d.load).toFixed(2) : 0) + " KW"}}</span>
          </p>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { GwListMixin } from '@/mixins/GwListMixin'
  import { gPostAction } from '@/api/manage'

  export default {
    name: 'DataCenter',
    mixins: [GwListMixin],
    data() {
      return {
        powerMap: {},
        temperatureMap: {},
        loadMap: {},
        powerList: [],
        temperatureList: [],
        loadList: [],
        url: {
          list: '/asset/pageDatacenter',
        },
      }
    },
    mounted() {
      this.loadData()
    },
    watch: {
      powerList(val) {
        this.changeData(val);
      },
      temperatureList(val) {
        this.changeData(val);
      },
      loadList(val) {
        this.changeData(val);
      },
    },
    methods: {
      changeData(array) {
        if (array && array.length === this.gDataSource.length) {
          let list = [];
          this.gDataSource.forEach((item) => {
            item.dpower = this.powerMap[item.id];
            item.temperature = this.temperatureMap[item.id];
            item.load = this.loadMap[item.id];
            list.push(item);
          });
          this.gDataSource = list;
        }
      },
      loadData() {
        this.powerList = [];
        this.temperatureList = [];
        this.loadList = [];
        this.gQueryParam.pageSize = 99;
        this.gQueryParam.title = "精确管控与供电制冷联动-基础资源细粒度感知-指标监控-数据中心",
          this.gQueryParam.content = "查看数据中心监控指标"
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          const data = res.data
          if (data && data.list) {
            this.gDataSource = data.list
            data.list.forEach((item) => {
              let datacenterId = item.id;
              gPostAction("/statistics/latestSamples", {
                meter: "datacenter.power",
                resourceId: datacenterId,
              }).then((res) => {
                if (res && res.data && res.data.length) {
                  this.powerList.push(res.data[0]);
                  this.powerMap[datacenterId] = res.data[0].volume
                }
              });
              gPostAction("/statistics/latestSamples", {
                meter: "datacenter.temperature",
                resourceId: datacenterId,
              }).then((res) => {
                if (res && res.data && res.data.length) {
                  this.temperatureList.push(res.data[0]);
                  this.temperatureMap[datacenterId] = res.data[0].volume
                }
              });
              gPostAction("/statistics/latestSamples", {
                meter: "datacenter.load",
                resourceId: datacenterId,
              }).then((res) => {
                if (res && res.data && res.data.length) {
                  this.loadList.push(res.data[0]);
                  this.loadMap[datacenterId] = res.data[0].volume
                }
              });
            })
          }
        })
      },
    },
  }
</script>